<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 100vh; /* 让容器高度为视口高度 */
            margin: 0; /* 去掉默认边距 */
        }
    </style>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        fetch('http://localhost:8080/lxz')
            .then(response => response.json())
            .then(data => {
                var myChart = echarts.init(document.getElementById('main'));
                
                // 将后端数据转化为适合ECharts的格式
                var words = data.map(item => item.word);
                var counts = data.map(item => item.count);

                var option = {
                    title: {
                        text: '统计数据'
                    },
                    tooltip: {},
                    xAxis: {
                        data: words // 使用words数组作为X轴数据
                    },
                    yAxis: {},
                    series: [{
                        name: '数量',
                        type: 'bar',
                        data: counts // 使用counts数组作为Y轴数据
                    }]
                };
                myChart.setOption(option);
            })
            .catch(error => console.error('Error fetching data:', error)); // 错误处理
    </script>
</body>
</html>
